{extend name='index@Common/index' /} {block name='content'}
<div class="row">
    <div class="col-9" style="flex: 1 0 auto;">
        <div class="cont-box bg-white p-3">
            <div class="page-header pb-3" style="border-bottom: 1px solid #eee;">
                <h4 class="mb-0">{$_GET['type'] == 'renew'?'续费':($_GET['type']=='update'?'升级':'创建')}VPS</h4>
            </div>
            <div class="mt-4" id="configs">
                <input type="hidden" name="id" value="{$_GET['id']}">
                <input type="hidden" name="name" value="{$_GET['name']}">
                <input type="hidden" name="pro_id" value="{$_GET['pro_id']}"> {if $_GET['type'] != 'renew'}
                <div class="form-group row">
                    <label for="" class="col-sm-1 col-form-label text-right">产品分组</label>
                    <div class="col-sm-6">
                        <div class="rc-group" id="group">
                            {foreach name="group" item="v" key="k"}
                            <input type="radio" name="group" value="{$v.id}" autocomplete="off" id="group{$v.id}" {$k=='0' ? 'checked': '' }>
                            <label class="rc-group-item" for="group{$v.id}">{$v.name}</label>{/foreach}
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="" class="col-sm-1 col-form-label text-right">产品类型</label>
                    <div class="col-sm-10 cloudhost-vps-create">
                        <div class="row px-3" id="common-type">
                            {foreach name="prolist" item="v" key="k"} {if $v}
                            <div data-id="{$v.id}" class="col-3 mr-3 mb-3 p-3 vps-buy {if $k==0}vps-selectcolor{else/}vps-unselectcolor{/if}">
                                <ul class="list-unstyled">
                                    <li class="zfs-14 pb-1 border-bottom d-flex w-100">
                                        <span class="mr-auto">{$v.name}</span>
                                    </li>
                                    <?php $describe = explode("|", $v['describe']); ?> {foreach name="describe" item="v"}
                                    <li class="mt-2">{$v}</li>
                                    {/foreach}
                                </ul>
                            </div>
                            {/if} {/foreach}
                            <!-- <div class="col-3 vps-unselectcolor mr-3 p-3 vps-buy">
                                <ul class="list-unstyled">
                                    <li class=" zfs-14 pb-1 border-bottom d-flex w-100">
                                        <span class="mr-auto">套餐3</span>
                                    </li>
                                    <li class=" mt-2">CPU：2核</li>
                                    <li class=" mt-2">内存：3G</li>
                                    <li class=" mt-2">硬盘(系统+数据)：200G</li>
                                    <li class="mt-2">带宽：6M独享</li>
                                </ul>
                            </div> -->
                            <!-- <div class="col-3 mr-3 p-3 novps-buy sellout" data-toggle="tooltip" title="已售罄，请尝试切换地域或提交工单申请">
                                <ul class="list-unstyled">
                                    <li class=" zfs-14 pb-1 border-bottom d-flex w-100">
                                        <span class="mr-auto">套餐2</span>
                                        <span class="badge bg-white text-999 font-weight-normal badge-pill pt-1 px-2">售罄</span>
                                    </li>
                                    <li class=" mt-2">CPU：2核</li>
                                    <li class=" mt-2">内存：2G</li>
                                    <li class=" mt-2">硬盘(系统+数据)：180G</li>
                                    <li class="mt-2">带宽：5M独享</li>

                                </ul>
                            </div> -->
                        </div>
                    </div>
                </div>
                {/if} {if $_GET['type'] != 'update'}
                <div class="form-group row">
                    <label for="" class="col-sm-1 col-form-label text-right">购买时长</label>
                    <div class="col-sm-6">
                        <div class="rc-group" id="purchaseLength">
                            <input type="radio" name="purchaseLength" value="1" autocomplete="off" id="purchaseLength1" checked>
                            <label class="rc-group-item" for="purchaseLength1">1个月</label>
                            <input type="radio" name="purchaseLength" value="2" autocomplete="off" id="purchaseLength2">
                            <label class="rc-group-item" for="purchaseLength2">2</label>
                            <input type="radio" name="purchaseLength" value="3" autocomplete="off" id="purchaseLength3">
                            <label class="rc-group-item" for="purchaseLength3">3</label>
                            <input type="radio" name="purchaseLength" value="4" autocomplete="off" id="purchaseLength4">
                            <label class="rc-group-item" for="purchaseLength4">4</label>
                            <input type="radio" name="purchaseLength" value="5" autocomplete="off" id="purchaseLength5">
                            <label class="rc-group-item" for="purchaseLength5">5</label>
                            <input type="radio" name="purchaseLength" value="6" autocomplete="off" id="purchaseLength6">
                            <label class="rc-group-item" for="purchaseLength6">6</label>
                            <input type="radio" name="purchaseLength" value="7" autocomplete="off" id="purchaseLength7">
                            <label class="rc-group-item" for="purchaseLength7">7</label>
                            <input type="radio" name="purchaseLength" value="8" autocomplete="off" id="purchaseLength8">
                            <label class="rc-group-item" for="purchaseLength8">8</label>
                            <input type="radio" name="purchaseLength" value="9" autocomplete="off" id="purchaseLength9">
                            <label class="rc-group-item" for="purchaseLength9">9</label>
                            <input type="radio" name="purchaseLength" value="12" autocomplete="off" id="purchaseLength12">
                            <label class="rc-group-item" for="purchaseLength12">1年</label>
                            <input type="radio" name="purchaseLength" value="24" autocomplete="off" id="purchaseLength24">
                            <label class="rc-group-item" for="purchaseLength24">2年</label>
                            <input type="radio" name="purchaseLength" value="36" autocomplete="off" id="purchaseLength36">
                            <label class="rc-group-item" for="purchaseLength36">3年</label>
                        </div>
                    </div>
                </div>
                {/if}
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="cont-box bg-white p-3">
            <div class="page-header pb-3" style="border-bottom: 1px solid #eee;">
                <h4 class="mb-0 d-flex align-content-center justify-content-between">
                    所选配置
                    <a href="JavaScript:;" onclick="window.location.reload()">清空配置</a>
                </h4>
            </div>
            <div class="" id="configinfo">
                <div class="form-group row m-0">
                    <label class="col-sm-4 col-form-label col-form-label-sm">产品分组
                        ：</label>
                    <div class="col-sm-7">
                        <p class="form-text text-muted" data-id="group">{$progroup?$progroup:'-'}</p>
                    </div>
                </div>
                <div class="form-group row m-0">
                    <label class="col-sm-4 col-form-label col-form-label-sm">产品类型：</label>
                    <div class="col-sm-7">
                        <p class="form-text text-muted" data-id="type">{$proname?$proname:'-'}</p>
                    </div>
                </div>
                {if $_GET['type'] != 'update'}
                <div class="form-group row m-0" id="tpfCountBox">
                    <label class="col-sm-4 col-form-label col-form-label-sm">购买配额：</label>
                    <div class="col-sm-7">
                        <p class="form-text text-muted count">
                            <span data-id="num">-</span>台 * <span data-id="length">-</span>月
                        </p>
                    </div>
                </div>
                {/if}
                <div class="form-group row m-0">
                    <label class="col-sm-4 col-form-label col-form-label-sm">配置费用：</label>
                    <div class="col-sm-7">
                        <p class="form-text text-muted"><span class="money text-danger fs-md" data-id="price">-</span></p>
                    </div>
                </div>
                <button class="btn btn-primary btn-block createCdsNext">下一步</button>
            </div>
        </div>
    </div>
</div>
{/block} {block name='js'}
<script>
    $('[name="group"]').change(function() {
        let t = $(this);
        ajax('{:url("index/Vps/getProItem")}', {
            id: t.val(),
            type: "{$_GET['type']}",
            pro_id: $('[name="pro_id"]').val()
        }, 'post').then(data => {
            if (data) {
                let temp = '',
                    dlist = '',
                    fName = '';
                data.map((e, i) => {
                    if (e) {
                        dlist = '';
                        let describe = e.describe.split('|');
                        describe.map(eve => {
                            dlist += `<li class="mt-2">${eve}</li>`;
                        });
                        // console.log(i);
                        // console.log(e);
                        if (i == 0) {
                            fName = e.name;
                        }
                        temp += `<div data-id="${e.id}" class="col-3 mr-3 mb-3 p-3 vps-buy ${i==0?'vps-selectcolor':'vps-unselectcolor'}">
                          <ul class="list-unstyled">
                              <li class="zfs-14 pb-1 border-bottom d-flex w-100">
                                  <span class="mr-auto">${e.name}</span>
                              </li>
                              ${dlist}
                          </ul>
                      </div>`;
                    }
                });
                $('#common-type').html(temp);
                getPrice();
            }
        });
    });
    $(document).on("click", ".vps-buy", function() {
        $(this).addClass("vps-selectcolor").removeClass("vps-unselectcolor").siblings().not(".novps-buy").removeClass("vps-selectcolor").addClass("vps-unselectcolor");
        getPrice();
    });
    $('[name="purchaseLength"]').change(function() {
        getPrice();
    });
    getPrice();

    function getPrice() {
        ajax('{:url("index/Vps/getPrice",["type"=>$_GET["type"]])}', {
            type: "{$_GET['type']}",
            pro_id: $('.vps-selectcolor').data('id') ? $('.vps-selectcolor').data('id') : $('[name="pro_id"]').val(),
            pay_length: $('[name="purchaseLength"]:checked').val(),
            id: $('[name="id"]').val(),
            name: $('[name="name"]').val(),
            num: 1
        }, 'post').then(e => {
            $('[data-id="group"]').text(<?php echo $progroup ? '"'.$progroup.'"' : "$('[name=\'group\']:checked').next().text()" ?>);
            $('[data-id="type"]').text(<?php echo $proname ? '"'.$proname.'"' : "$('.vps-selectcolor').find('li span').text()" ?>);
            $('[data-id="num"]').text(1);
            $('[data-id="length"]').text($('[name="purchaseLength"]:checked').val());
            $('[data-id="price"]').text(e.data.price);
            console.log(e);
        });
    }
    $('.createCdsNext').click(function() {
        //开通
        ajax('{:url("index/Vps/addAuth")}', {
            type: "{$_GET['type']}",
            pro_id: $('.vps-selectcolor').data('id') ? $('.vps-selectcolor').data('id') : $('[name="pro_id"]').val(),
            pay_length: $('[name="purchaseLength"]:checked').val(),
            id: $('[name="id"]').val(),
            name: $('[name="name"]').val(),
            num: 1
        }, 'post').then(e => {
            if (e.status == 200) {
                location.href = "{:url('index/Buy/confirm')}";
            } else {
                alert(e.msg);
            }
        });

    });
</script>
{/block}